import React, { useState, useCallback, useRef, useEffect, useMemo, ChangeEvent } from 'react';
import { Form, Input, Select, Button, Radio, Upload, Switch, message, Row, Col, Card, Tabs, Flex, Checkbox } from 'antd';
import { PlusOutlined, DeleteOutlined, UploadOutlined, LeftOutlined, ReloadOutlined } from '@ant-design/icons';
import styles from './index.module.css';
import ImageUploader from '@/components/ImageUploader';
import UEditor from '@/components/ueditor';
import { goodstypeApi } from '@/api/goodstype/index';
import { dataurl } from '@/api/url';
import { handleNumberInput, handleTextOnlyInput } from '@/components/business/index';
import { goodsSaveApi } from '@/api/goods/index';
// 类型定义 
interface Category {
  id: number;
  title: string;
  status: number;
  createTime: string;
}

interface ApiRes<T> {
  code: number;
  msg: string;
  data: T;
}

interface CategoryRes {
  list: Category[];
}

interface NormItem {
  name: string;
  value: string[];
}

interface NormArrItem {
  name: string;
  price: number;
  original_price: number;
  stock: number;
  img: string;
}

interface StockData {
  specType: string;
  price?: string;
  original_price?: string;
  stock?: string;
  norm?: NormItem[];
  norm_arr?: NormArrItem[];
  collectedAt?: string;
}

interface FormData {
  category: string;
  name: string;
  desc: string;
  unit: string;
  enableVideo: boolean;
  video?: string;
  mainImg: string;
  carouselImgs: string[];
  status: 'active' | 'inactive';
  price?: string;
  originalPrice?: string;
  stock?: string;
  content: string;
  params: string;
  address: string;
  freight: string;
  sort: string;
  sold: string;
  recommend: string[];
  keyword: string;
  specType?: 'single' | 'multiple';
  specs?: Record<string, any>;
}

// 规格相关类型定义
interface Spec {
  id: number;
  name: string;
  price: string;
  originalPrice: string;
  stock: string;
  imageUrl: string;
}

// 常量定义
const SPEC_TYPES = {
  SINGLE: 'single',
  MULTIPLE: 'multiple'
} as const;

const API_SPEC_TYPES = {
  SINGLE: '1',  // 单规格
  MULTIPLE: '0' // 多规格
} as const;

const INITIAL_SPEC_VALUE = {
  name: '',
  price: '',
  originalPrice: '',
  stock: '',
  imageUrl: ''
};

const SPEC_FIELD_NAMES = ['name', 'price', 'originalPrice', 'stock', 'imageUrl'] as const;

// 验证规则
const createSimpleRules = (fieldName: string) => [
  { required: true, message: `${fieldName}不能为空` }
];

// 分类数据 Hook
const useCategories = () => {
  const [list, setList] = useState<Category[]>([]);
  const [loading, setLoading] = useState(false);

  const load = useCallback(async () => {
    try {
      setLoading(true);
      const res = await goodstypeApi().signIn({});
      const apiRes = res as ApiRes<CategoryRes>;
      if (apiRes?.code === 1) {
        setList(apiRes.data?.list || []);
      } else {
        throw new Error(apiRes?.msg || '获取分类失败');
      }
    } catch (error) {
      message.error(error instanceof Error ? error.message : '加载失败');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  return { list, loading, load };
};

// 规格管理
const useSpecs = (form: any) => {
  const [specType, setSpecType] = useState<'single' | 'multiple'>(SPEC_TYPES.SINGLE);
  const [specs, setSpecs] = useState<Spec[]>([{ id: 1, ...INITIAL_SPEC_VALUE }]);
  const [imageUploaderKeys, setImageUploaderKeys] = useState<Record<number, number>>({ 1: Date.now() });
  const [isInitialized, setIsInitialized] = useState(false);

  // 生成新的规格ID
  const getNewId = useCallback(() => specs.length > 0 ? Math.max(...specs.map(item => item.id)) + 1 : 1, [specs]);

  // 添加规格
  const addSpec = useCallback(() => {
    const newId = getNewId();
    const newSpec = { id: newId, ...INITIAL_SPEC_VALUE };
    setSpecs(prev => [...prev, newSpec]);
    setImageUploaderKeys(prev => ({
      ...prev,
      [newId]: Date.now()
    }));
  }, [getNewId]);

  // 删除规格
  const deleteSpec = useCallback((id: number) => {
    if (specs.length <= 1) {
      message.warning('至少保留一个规格');
      return;
    }

    setSpecs(prev => prev.filter(item => item.id !== id));

    // 清理表单数据
    SPEC_FIELD_NAMES.forEach(field => {
      form.setFieldValue([`specs.${id}.${field}`], undefined);
    });

    // 清理上传器key
    setImageUploaderKeys(prev => {
      const newKeys = { ...prev };
      delete newKeys[id];
      return newKeys;
    });
  }, [specs.length, form]);

  // 重置规格
  const resetSpec = useCallback((id: number) => {
    const resetValues = { ...INITIAL_SPEC_VALUE };
    setSpecs(prev => prev.map(item =>
      item.id === id ? { ...item, ...resetValues } : item
    ));

    SPEC_FIELD_NAMES.forEach(field => {
      form.setFieldValue([`specs.${id}.${field}`], resetValues[field as keyof typeof INITIAL_SPEC_VALUE]);
    });

    setImageUploaderKeys(prev => ({
      ...prev,
      [id]: Date.now()
    }));
  }, [form]);

  // 图片上传成功处理
  const handleImageUploadSuccess = useCallback((id: number, url: string | string[]) => {
    const imageUrl = Array.isArray(url) ? url[0] : url;
    form.setFieldValue([`specs.${id}.imageUrl`], imageUrl);
    setSpecs(prev => prev.map(item =>
      item.id === id ? { ...item, imageUrl } : item
    ));
  }, [form]);

  // 初始化多规格数据 
  const initializeSpecs = useCallback((norm_arr: NormArrItem[] = []) => {
    if (norm_arr.length === 0) {
      setIsInitialized(true);
      return;
    }
    // 根据后端数据创建规格项
    const newSpecs: Spec[] = norm_arr.map((spec, index) => ({
      id: index + 1,
      name: spec.name || '',
      price: spec.price?.toString() || '',
      originalPrice: spec.original_price?.toString() || '',
      stock: spec.stock?.toString() || '',
      imageUrl: spec.img || ''
    }));

    setSpecs(newSpecs);

    // 设置图片上传器keys
    const newKeys: Record<number, number> = {};
    newSpecs.forEach(spec => {
      newKeys[spec.id] = Date.now() + spec.id;
    });
    setImageUploaderKeys(newKeys);

    // 设置表单值
    const specsFormData: Record<string, any> = {};
    newSpecs.forEach(spec => {
      specsFormData[`specs.${spec.id}.name`] = spec.name;
      specsFormData[`specs.${spec.id}.price`] = spec.price;
      specsFormData[`specs.${spec.id}.originalPrice`] = spec.originalPrice;
      specsFormData[`specs.${spec.id}.stock`] = spec.stock;
      specsFormData[`specs.${spec.id}.imageUrl`] = spec.imageUrl;
    });

    form.setFieldsValue(specsFormData);
    setIsInitialized(true);
  }, [form]);

  // 设置规格类型
  const setSpecTypeWithInit = useCallback((type: 'single' | 'multiple') => {
    setSpecType(type);
    if (type === SPEC_TYPES.SINGLE) {
      setIsInitialized(true);
    }
  }, []);

  return {
    specType,
    setSpecType: setSpecTypeWithInit,
    specs,
    imageUploaderKeys,
    isInitialized,
    addSpec,
    deleteSpec,
    resetSpec,
    handleImageUploadSuccess,
    initializeSpecs
  };
};

// 库存数据处理 Hook
const useStockData = (specType: 'single' | 'multiple') => {
  const getStockData = useCallback((values: any): StockData | null => {
    // 单规格处理
    if (specType === SPEC_TYPES.SINGLE) {
      if (!values.price || !values.originalPrice || !values.stock) {
        message.error('请填写完整的单规格信息');
        return null;
      }

      return {
        specType: API_SPEC_TYPES.SINGLE,
        price: values.price,
        original_price: values.originalPrice,
        stock: values.stock,
        collectedAt: new Date().toISOString()
      };
    }

    // 多规格处理
    const allSpecData = Object.keys(values)
      .filter(key => key.startsWith('specs.'))
      .reduce((acc: any, key) => {
        const [_, specId, field] = key.split('.');
        if (!acc[specId]) acc[specId] = {};
        acc[specId][field] = values[key];
        return acc;
      }, {});

    const validSpecData = Object.values(allSpecData).filter((data: any) =>
      data.name?.trim() &&
      data.price &&
      data.originalPrice &&
      data.stock &&
      data.imageUrl
    );

    if (validSpecData.length === 0) {
      message.error('请填写完整的规格信息');
      return null;
    }

    // 生成多规格的norm和norm_arr
    const norm: NormItem[] = [{
      name: "name",
      value: validSpecData.map((data: any) => data.name.trim())
    }];

    const norm_arr: NormArrItem[] = validSpecData.map((data: any) => ({
      name: data.name.trim(),
      price: Number(data.price || '0'),
      original_price: Number(data.originalPrice || '0'),
      stock: Number(data.stock || '0'),
      img: data.imageUrl || ''
    }));

    return {
      specType: API_SPEC_TYPES.MULTIPLE,
      norm: norm,
      norm_arr: norm_arr,
      collectedAt: new Date().toISOString()
    };
  }, [specType]);

  return { getStockData };
};

// 表单验证 Hook
const useValidation = (form: any, specType: 'single' | 'multiple', specs: Spec[]) => {
  const validateStep = useCallback(async (step: number) => {
    try {
      let fieldsToValidate: string[] = [];

      switch (step) {
        case 1:
          fieldsToValidate = ['category', 'name', 'desc', 'unit', 'mainImg', 'carouselImgs', 'status'];
          break;
        case 2:
          if (specType === SPEC_TYPES.MULTIPLE) {
            specs.forEach((spec) => {
              SPEC_FIELD_NAMES.forEach(field => {
                fieldsToValidate.push(`specs.${spec.id}.${field}`);
              });
            });
          } else {
            fieldsToValidate = ['price', 'originalPrice', 'stock'];
          }
          break;
        case 3:
          fieldsToValidate = ['content'];
          break;
        case 4:
          fieldsToValidate = ['params'];
          break;
        case 5:
          fieldsToValidate = ['address', 'freight'];
          break;
        case 6:
          fieldsToValidate = ['sort', 'sold', 'recommend', 'keyword'];
          break;
        default:
          fieldsToValidate = [];
      }

      await form.validateFields(fieldsToValidate);
      return true;
    } catch (error: any) {
      message.error('请完善当前步骤的必填项');
      return false;
    }
  }, [form, specType, specs]);

  return { validateStep };
};

// 富文本图片处理
const processContent = (text: string, mode: 'save' | 'edit'): string => {
  if (!text) return '';
  const div = document.createElement('div');
  div.innerHTML = text;

  div.querySelectorAll('img').forEach(img => {
    const src = img.getAttribute('src');
    if (!src) return;

    if (mode === 'save') {
      const index = src.indexOf('/upload');
      if (index !== -1) {
        img.setAttribute('src', src.substring(index));
      }
    } else {
      if (!src.startsWith('http')) {
        const newSrc = src.startsWith('/upload') ? src : `/upload${src.startsWith('/') ? '' : '/'}${src}`;
        img.setAttribute('src', `${dataurl}${newSrc}`);
      }
    }
  });

  return div.innerHTML;
};

// 初始化表单数据
const useFormInitialization = (form: any, editor1: React.RefObject<any>, editor2: React.RefObject<any>, specHook: any) => {
  const { initializeSpecs, setSpecType } = specHook;

  useEffect(() => {
    const initializeForm = async () => {
      try {
        // 从临时存储获取编辑商品数据
        const editProductData = sessionStorage.getItem('Edittheproduct');
        // 新增商品时的初始化
        if (!editProductData) {
          // 设置默认规格类型为单规格
          setSpecType(SPEC_TYPES.SINGLE);
          return;
        }

        // 编辑商品的逻辑
        const productData = JSON.parse(editProductData);
        const isSingleSpec = productData.type === 1;
        const specTypeValue = isSingleSpec ? SPEC_TYPES.SINGLE : SPEC_TYPES.MULTIPLE;
        setSpecType(specTypeValue);

        const initialValues: any = {
          category: productData.goods_type_id?.toString() || '', // 假设 goods_type_id 是一个数字
          name: productData.title || '',
          desc: productData.synopsis || '',
          unit: productData.unit || '',
          mainImg: productData.img || '',
          carouselImgs: productData.imgs ? productData.imgs.split(',') : [],
          status: productData.status === 1 ? 'active' : 'inactive',
          content: processContent(productData.content || '', 'edit'),
          params: processContent(productData.params || '', 'edit'),
          address: productData.shipping_address || '',
          freight: productData.courier_fee || '',
          sort: productData.sort?.toString() || '0',
          sold: productData.sold?.toString() || '0',
          recommend: productData.recommend?.map((item: number) => item.toString()) || [],
          keyword: productData.keyword || '',
          specType: specTypeValue,
        };

        if (isSingleSpec) {
          initialValues.price = productData.price || '';
          initialValues.originalPrice = productData.original_price || '';
          initialValues.stock = productData.stock?.toString() || '';
        } else {
          // 确保 norm_arr 是一个数组
          if (productData.norm_arr && Array.isArray(productData.norm_arr)) {
            initializeSpecs(productData.norm_arr);
          } else {
            initializeSpecs([]); // 传入空数组进行初始化
          }
        }

        form.setFieldsValue(initialValues);

        // 设置富文本编辑器内容
        const setEditorContent = () => {
          if (editor1.current && productData.content) {
            try {
              editor1.current.setContent(processContent(productData.content, 'edit'));
            } catch (error) {
              setTimeout(setEditorContent, 100);
            }
          }
          if (editor2.current && productData.params) {
            try {
              editor2.current.setContent(processContent(productData.params, 'edit'));
            } catch (error) {
              setTimeout(setEditorContent, 100);
            }
          }
        };

        setTimeout(setEditorContent, 500);
      } catch (error) {
        console.error('初始化表单数据失败:', error);
        message.error('加载商品数据失败，使用默认表单');
      }
    };

    initializeForm();
  }, [form, editor1, editor2, setSpecType, initializeSpecs]);
};

// 基础信息表单组件
const BaseInfoForm: React.FC<{ form: any }> = ({ form }) => {
  const { list, loading } = useCategories();
  const mainImgValue = Form.useWatch('mainImg', form);
  const carouselImgsValue = Form.useWatch('carouselImgs', form);

  const onMainImg = useCallback((url: string | string[]) => {
    const img = Array.isArray(url) ? url[0] : url;
    form.setFieldValue('mainImg', img);
  }, [form]);

  const onCarouselImgs = useCallback((urls: string | string[]) => {
    if (Array.isArray(urls)) {
      form.setFieldValue('carouselImgs', urls);
    } else {
      form.setFieldValue('carouselImgs', [urls]);
    }
  }, [form]);

  return (
    <Form
      form={form}
      layout="horizontal"
      labelCol={{ span: 2 }}
      wrapperCol={{ span: 22 }}
      initialValues={{ status: 'active', enableVideo: false }}
    >
      <Form.Item
        label="商品分类"
        name="category"
        rules={createSimpleRules('商品分类')}
      >
        <Select
          placeholder="请选择商品分类"
          size="middle"
          allowClear
          className={styles.productNameInput}
          loading={loading}
        >
          {list.map(item => (
            <Select.Option key={item.id} value={item.id.toString()}>
              {item.title}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        label="商品名称"
        name="name"
        rules={createSimpleRules('商品名称')}
      >
        <Input
          placeholder="请输入商品名称"
          size="middle"
          className={styles.productNameInput}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleTextOnlyInput(form, 'name', e, { maxLength: 50 })
          }
          onInput={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleTextOnlyInput(form, 'name', e, { maxLength: 50 })
          }
        />
      </Form.Item>

      <Form.Item
        label="商品简介"
        name="desc"
        rules={createSimpleRules('商品简介')}
      >
        <Input
          placeholder="请输入商品简介"
          size="middle"
          className={styles.productNameInput}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleTextOnlyInput(form, 'desc', e, { maxLength: 100 })
          }
          onInput={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleTextOnlyInput(form, 'desc', e, { maxLength: 100 })
          }
        />
      </Form.Item>

      <Form.Item
        label="单位"
        name="unit"
        rules={createSimpleRules('单位')}
      >
        <Input
          placeholder="请输入单位"
          size="middle"
          maxLength={10}
          className={styles.productNameInput}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleTextOnlyInput(form, 'unit', e, { maxLength: 10 })
          }
          onInput={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleTextOnlyInput(form, 'unit', e, { maxLength: 10 })
          }
        />
      </Form.Item>

      <Form.Item label="是否添加视频" name="enableVideo" valuePropName="checked">
        <Switch />
      </Form.Item>

      <Form.Item
        noStyle
        shouldUpdate={(prev, curr) => prev.enableVideo !== curr.enableVideo}
      >
        {({ getFieldValue }) =>
          getFieldValue('enableVideo') ? (
            <Form.Item
              label="商品视频"
              name="video"
              rules={createSimpleRules('商品视频')}
            >
              <div className={styles.videoUploadContainer}>
                <Upload maxCount={1} accept="video/mp4,video/avi">
                  <Button icon={<UploadOutlined />} size="middle" style={{ width: '100%' }}>
                    点击上传视频
                  </Button>
                </Upload>
                <Button danger icon={<DeleteOutlined />}>删除</Button>
              </div>
            </Form.Item>
          ) : null
        }
      </Form.Item>

      <Row className="imageUploadRow">
        <Col span={6}>
          <Form.Item
            label="商品图片"
            name="mainImg"
            rules={createSimpleRules('商品图片')}
            labelCol={{ span: 8 }}
            style={{ margin: 0 }}
            wrapperCol={{ span: 12 }}
            className={styles.photoGraph}
          >
            <ImageUploader
              key={`main-img-${mainImgValue || 'empty'}`}
              maxCount={1}
              onUploadSuccess={onMainImg}
              imageUrl={mainImgValue}
            />
          </Form.Item>
        </Col>
        <Col span={16}>
          <Form.Item
            label="轮播图"
            name="carouselImgs"
            className={styles.photoGraph}
            rules={[{
              validator: (_, value) =>
                !value || value.length < 2
                  ? Promise.reject(new Error('请上传至少两张轮播图'))
                  : Promise.resolve()
            }]}
          >
            <ImageUploader
              key={`carousel-${carouselImgsValue?.length || 0}`}
              maxCount={4}
              onUploadSuccess={onCarouselImgs}
              imageUrl={carouselImgsValue}
            />
          </Form.Item>
        </Col>
      </Row>

      <Form.Item
        label="状态"
        name="status"
        rules={createSimpleRules('商品状态')}
        style={{ marginTop: -20 }}
      >
        <Radio.Group size="large">
          <Radio value="active">上架</Radio>
          <Radio value="inactive">下架</Radio>
        </Radio.Group>
      </Form.Item>
    </Form>
  );
};

// 规格配置组件
interface SpecConfigProps {
  form: any;
  specHook: any;
}

const SpecConfig: React.FC<SpecConfigProps> = ({ form, specHook }) => {
  const {
    specType,
    setSpecType,
    specs,
    imageUploaderKeys,
    isInitialized,
    addSpec,
    deleteSpec,
    resetSpec,
    handleImageUploadSuccess
  } = specHook;

  // 规格类型切换时的数据清理
  useEffect(() => {
    if (!isInitialized) return;

    const currentValues = form.getFieldsValue(true);

    if (specType === SPEC_TYPES.SINGLE) {
      // 切换到单规格时清理多规格数据
      const updatedValues = { ...currentValues };
      specs.forEach(spec => {
        SPEC_FIELD_NAMES.forEach(field => {
          const fieldName = `specs.${spec.id}.${field}`;
          delete updatedValues[fieldName];
        });
      });
      delete updatedValues.specs;
      form.setFieldsValue(updatedValues);
    } else {
      // 切换到多规格时清理单规格数据
      const updatedValues = { ...currentValues };
      delete updatedValues.price;
      delete updatedValues.originalPrice;
      delete updatedValues.stock;
      form.setFieldsValue(updatedValues);
    }
  }, [specType, form, specs, isInitialized]);

  const multiSpecs = useMemo(() => (
    <>
      <Form.Item
        label="规格名称"
        required
        style={{ marginBottom: 16 }}
      >
        <div className={styles.specNameInputLayout}>
          <Button type="default" icon={<PlusOutlined />} onClick={addSpec}>
            添加新规格
          </Button>
          <div className={styles.specNameGrid}>
            {specs.map((spec) => (
              <Form.Item
                key={`name-${spec.id}`}
                name={[`specs.${spec.id}.name`]}
                rules={createSimpleRules('规格名称')}
                required
                style={{ margin: 0 }}
                validateTrigger={['onChange', 'onBlur']}
              >
                <Input
                  placeholder="请输入规格名称"
                  suffix={specs.length > 1 && (
                    <DeleteOutlined
                      onClick={() => deleteSpec(spec.id)}
                      style={{ cursor: 'pointer', color: '#ff4d4f' }}
                    />
                  )}
                />
              </Form.Item>
            ))}
          </div>
        </div>
      </Form.Item>

      <Form.Item
        label="批量设置"
        required
        style={{ marginBottom: 16 }}
      >
        <table className={styles.batchTable}>
          <thead>
            <tr className={styles.tableHeader}>
              <th className={styles.tableHeaderCell}>图片</th>
              <th className={styles.tableHeaderCell}>售价</th>
              <th className={styles.tableHeaderCell}>原价</th>
              <th className={styles.tableHeaderCell}>库存</th>
              <th className={styles.tableHeaderCell}>操作</th>
            </tr>
          </thead>
          <tbody>
            {specs.map((spec) => (
              <tr key={`row-${spec.id}`}>
                <td className={styles.pictureIncorrect}>
                  <Form.Item
                    name={[`specs.${spec.id}.imageUrl`]}
                    rules={createSimpleRules('商品图片')}
                    style={{ margin: 0 }}
                    required
                  >
                    <div className={styles.specImageUploadContainer}>
                      <ImageUploader
                        key={`uploader-${spec.id}-${imageUploaderKeys[spec.id] || Date.now()}`}
                        imageUrl={spec.imageUrl}
                        onUploadSuccess={(url) => handleImageUploadSuccess(spec.id, url)}
                        maxCount={1}
                      />
                    </div>
                  </Form.Item>
                </td>
                <td className={styles.tableBodyCell}>
                  <Form.Item
                    name={[`specs.${spec.id}.price`]}
                    rules={createSimpleRules('售价')}
                    style={{ margin: 0 }}
                    required
                  >
                    <Input
                      placeholder="请输入价格"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        handleNumberInput(form, `specs.${spec.id}.price`, e, { supportDecimal: true })
                      }
                    />
                  </Form.Item>
                </td>
                <td className={styles.tableBodyCell}>
                  <Form.Item
                    name={[`specs.${spec.id}.originalPrice`]}
                    rules={createSimpleRules('原价')}
                    style={{ margin: 0 }}
                    required
                  >
                    <Input
                      placeholder="请输入原价"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        handleNumberInput(form, `specs.${spec.id}.originalPrice`, e, { supportDecimal: true })
                      }
                    />
                  </Form.Item>
                </td>
                <td className={styles.tableBodyCell}>
                  <Form.Item
                    name={[`specs.${spec.id}.stock`]}
                    rules={createSimpleRules('库存')}
                    style={{ margin: 0 }}
                    required
                  >
                    <Input
                      placeholder="请输入库存"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        handleNumberInput(form, `specs.${spec.id}.stock`, e, { supportDecimal: false })
                      }
                    />
                  </Form.Item>
                </td>
                <td className={styles.tableBodyCell}>
                  <div className={styles.operationBtnLayout}>
                    <Button
                      className={styles.deleteButton}
                      danger
                      icon={<DeleteOutlined />}
                      onClick={() => deleteSpec(spec.id)}
                      disabled={specs.length <= 1}
                    >
                      删除
                    </Button>
                    <Button
                      className={styles.resetButton}
                      icon={<ReloadOutlined />}
                      onClick={() => resetSpec(spec.id)}
                    >
                      重置
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Form.Item>
    </>
  ), [specs, imageUploaderKeys, addSpec, deleteSpec, resetSpec, handleImageUploadSuccess, form]);

  const singleSpec = useMemo(() => (
    <>
      <Form.Item
        label="售价"
        name="price"
        rules={createSimpleRules('售价')}
        required
        style={{ marginBottom: 16 }}
      >
        <Input
          placeholder="请输入价格"
          className={styles.productNameInput}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleNumberInput(form, 'price', e, { supportDecimal: true })
          }
        />
      </Form.Item>
      <Form.Item
        label="原价"
        name="originalPrice"
        rules={createSimpleRules('原价')}
        required
        style={{ marginBottom: 16 }}
      >
        <Input
          placeholder="请输入原价"
          className={styles.productNameInput}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleNumberInput(form, 'originalPrice', e, { supportDecimal: true })
          }
        />
      </Form.Item>
      <Form.Item
        label="库存"
        name="stock"
        rules={createSimpleRules('库存')}
        required
        style={{ marginBottom: 16 }}
      >
        <Input
          placeholder="请输入库存"
          className={styles.productNameInput}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            handleNumberInput(form, 'stock', e, { supportDecimal: false })
          }
        />
      </Form.Item>
    </>
  ), [form]);

  if (!isInitialized) {
    return <div>加载规格数据中...</div>;
  }

  return (
    <Form
      form={form}
      layout="horizontal"
      labelCol={{ span: 2 }}
      wrapperCol={{ span: 22 }}
      validateMessages={{ required: '${label}不能为空' }}
    >
      <Form.Item label="商品规格" required style={{ marginBottom: 16 }}>
        <div className={styles.specTypeLayout}>
          <Radio.Group
            value={specType}
            onChange={(e) => setSpecType(e.target.value)}
          >
            <Radio value={SPEC_TYPES.SINGLE}>单规格</Radio>
            <Radio value={SPEC_TYPES.MULTIPLE}>多规格</Radio>
          </Radio.Group>
        </div>
      </Form.Item>

      {specType === SPEC_TYPES.MULTIPLE ? multiSpecs : singleSpec}
    </Form>
  );
};

// 主组件
const ProductPublish: React.FC = () => {
  const [form] = Form.useForm<FormData>();
  const [activeTab, setActiveTab] = useState('1');
  const editor1 = useRef<any>(null);
  const editor2 = useRef<any>(null);

  const specHook = useSpecs(form);
  const { specType, specs, isInitialized } = specHook;
  const { getStockData } = useStockData(specType);
  const { validateStep } = useValidation(form, specType, specs);

  // 初始化表单数据
  useFormInitialization(form, editor1, editor2, specHook);

  const syncEditorContent = useCallback(() => {
    if (editor1.current) {
      form.setFieldValue('content', editor1.current.getContent());
    }
    if (editor2.current) {
      form.setFieldValue('params', editor2.current.getContent());
    }
  }, [form]);

  const handleTabChange = useCallback(async (key: string) => {
    const currentStep = parseInt(activeTab, 10);
    const newStep = parseInt(key, 10);

    if (newStep > currentStep) {
      const isValid = await validateStep(currentStep);
      if (!isValid) return;
    }

    setActiveTab(key);
  }, [activeTab, validateStep]);

  const handleStepChange = useCallback(async (direction: 'prev' | 'next') => {
    const currentStep = parseInt(activeTab, 10);
    if (direction === 'next') {
      const isValid = await validateStep(currentStep);
      if (!isValid) return;
    }
    const newStep = direction === 'prev'
      ? Math.max(1, currentStep - 1)
      : Math.min(6, currentStep + 1);

    setActiveTab(newStep.toString());
  }, [activeTab, validateStep]);

  const handleSave = useCallback(async () => {
    try {
      syncEditorContent();

      // 验证所有步骤
      for (let step = 1; step <= 6; step++) {
        const isValid = await validateStep(step);
        if (!isValid) {
          setActiveTab(step.toString());
          return;
        }
      }
      const values = form.getFieldsValue(true);
      const stockData = getStockData(values);
      if (!stockData) return;

      const content = processContent(values.content || '', 'save');
      const params = processContent(values.params || '', 'save');

      // 构建提交数据
      const submitData: any = {
        type: stockData.specType === API_SPEC_TYPES.SINGLE ? 1 : 0,
        goods_type_id: values.category ? Number(values.category) : '',
        title: values.name || "",
        synopsis: values.desc || "",
        unit: values.unit || "",
        img: values.mainImg || "",
        imgs: values.carouselImgs?.join(',') || "",
        status: values.status === 'active' ? 1 : 0,
        content: content,
        params: params,
        shipping_address: values.address || "",
        courier_fee: values.freight || "0.00",
        sort: Number(values.sort) || 0,
        sold: Number(values.sold) || 0,
        keyword: values.keyword || "",
        recommend: values.recommend?.join(',') || "",

        // 单规格数据
        ...(stockData.specType === API_SPEC_TYPES.SINGLE ? {
          price: stockData.price || "0.00",
          original_price: stockData.original_price || "0.00",
          stock: Number(stockData.stock) || 0
        } : {
          // 多规格数据 - 修复关键问题
          norm: JSON.stringify(stockData.norm || []),
          norm_arr: JSON.stringify(stockData.norm_arr || [])
        })
      };

      // **核心改动：编辑时添加商品ID**
      const editProductData = sessionStorage.getItem('Edittheproduct');
      if (editProductData) {
        const productData = JSON.parse(editProductData);
        if (productData.id !== undefined && productData.id !== null) {
          submitData.id = productData.id; // 将商品ID添加到提交数据中
        }
      }

      console.log('提交数据:', submitData);

      // 调用保存接口
      const response = await goodsSaveApi(submitData);

      if (response && response.code === 1) {
        message.success('商品保存成功！');
        // 清除编辑状态
        sessionStorage.removeItem('Edittheproduct');
        // 延迟1.5秒后返回上一页
        setTimeout(() => {
          window.history.back();
        }, 1500);
      } else {
        const errorMsg = response?.msg || '商品保存失败，请稍后重试。';
        message.error(errorMsg);
      }
    } catch (error: any) {
      console.error('保存失败详情:', error);
      message.error('保存失败，请检查网络或联系管理员。');
    }
  }, [form, syncEditorContent, validateStep, getStockData]);

  const renderActionButtons = useCallback((tabKey: string) => {
    const isFirstStep = tabKey === '1';
    const isLastStep = tabKey === '6';

    return (
      <Flex gap="small" style={{ marginTop: 24, padding: '0 20px' }}>
        {!isFirstStep && (
          <Button onClick={() => handleStepChange('prev')}>
            上一步
          </Button>
        )}
        {!isLastStep ? (
          <Button type="primary" onClick={() => handleStepChange('next')}>
            下一步
          </Button>
        ) : (
          <Button type="primary" onClick={handleSave}>
            保存
          </Button>
        )}
      </Flex>
    );
  }, [handleStepChange, handleSave]);

  const tabItems = useMemo(() => [
    {
      key: '1',
      label: '基础信息',
      children: (
        <>
          <BaseInfoForm form={form} />
          {renderActionButtons('1')}
        </>
      ),
    },
    {
      key: '2',
      label: '规格库存',
      children: (
        <>
          <SpecConfig form={form} specHook={specHook} />
          {renderActionButtons('2')}
        </>
      ),
    },
    {
      key: '3',
      label: '商品详情',
      children: (
        <>
          <Form form={form} layout="horizontal" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
            <Form.Item
              name="content"
              label="商品详情"
              rules={createSimpleRules('商品详情')}
            >
              <UEditor ref={editor1} />
            </Form.Item>
          </Form>
          {renderActionButtons('3')}
        </>
      ),
    },
    {
      key: '4',
      label: '产品参数',
      children: (
        <>
          <Form form={form} layout="horizontal" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
            <Form.Item
              name="params"
              label="产品参数"
              rules={createSimpleRules('产品参数')}
            >
              <UEditor ref={editor2} />
            </Form.Item>
          </Form>
          {renderActionButtons('4')}
        </>
      ),
    },
    {
      key: '5',
      label: '物流设置',
      children: (
        <>
          <Form form={form} colon={false} layout="horizontal" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
            <Form.Item
              name="address"
              label="发货地址"
              rules={createSimpleRules('发货地址')}
            >
              <Input placeholder="请输入发货地址" className={styles.productNameInput}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  handleTextOnlyInput(form, 'address', e, { maxLength: 100 })
                }
              />
            </Form.Item>
            <Form.Item
              name="freight"
              label="运费"
              rules={createSimpleRules('运费')}
            >
              <Input placeholder="请输入运费" className={styles.productNameInput}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  handleNumberInput(form, 'freight', e, { supportDecimal: true })
                }
              />
            </Form.Item>
          </Form>
          {renderActionButtons('5')}
        </>
      ),
    },
    {
      key: '6',
      label: '营销设置',
      children: (
        <>
          <Form form={form} colon={false} layout="horizontal" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
            <Form.Item
              name="sort"
              label="排序"
              rules={createSimpleRules('排序')}
            >
              <Input placeholder="请输入排序" className={styles.productNameInput}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  handleNumberInput(form, 'sort', e, { supportDecimal: false })
                }
              />
            </Form.Item>
            <Form.Item
              name="sold"
              label="已售数量"
              rules={createSimpleRules('已售数量')}
            >
              <Input placeholder="请输入已售数量" className={styles.productNameInput}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  handleNumberInput(form, 'sold', e, { supportDecimal: false })
                }
              />
            </Form.Item>
            <Form.Item
              name="recommend"
              label="商品推荐"
              rules={createSimpleRules('商品推荐')}
            >
              <Checkbox.Group>
                <Checkbox value="1">热销商品</Checkbox>
                <Checkbox value="2">为您推荐</Checkbox>
                <Checkbox value="3">猜你喜欢</Checkbox>
              </Checkbox.Group>
            </Form.Item>
            <Form.Item
              name="keyword"
              label="关键字"
              rules={createSimpleRules('关键字')}
            >
              <Input placeholder="请输入关键字" className={styles.productNameInput}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  handleTextOnlyInput(form, 'keyword', e, { maxLength: 50 })
                }
              />
            </Form.Item>
          </Form>
          {renderActionButtons('6')}
        </>
      ),
    },
  ], [form, renderActionButtons, specHook]);

  return (
    <Card className={styles.cardContainer}>
      <div className={styles.headerBar}>
        <Button
          type="text"
          icon={<LeftOutlined className={styles.backIcon} />}
          onClick={() => window.history.back()}
          className={styles.backButton}
        >
          返回
        </Button>

        <span className={styles.pageTitle}>
          {sessionStorage.getItem('Edittheproduct') ? '编辑商品' : '新建商品'}
        </span>
      </div>

      <Tabs
        activeKey={activeTab}
        items={tabItems}
        onChange={handleTabChange}
        size="large"
        className={styles.tabsContainer}
      />
    </Card>
  );
};

export default ProductPublish;